<template>
  <tl-sub-page :render="render" ref="drawerRef" :visible.sync="visible" :with-header="false" class="tl-drawer" :modal-append-to-body="true" :close-on-press-escape="false" :append-to-body="true" size="95%" @open="open" @close="close">
    <div class="mpm-project-container">
      <div class="mpm-project-header">
        <div class="info">
          <img src="/static/images/paojectManager/mpmriskheader.png" class="logo" alt="项目问题" style="width:55px;height:55px" />

          <div class="content" :title="model.projectname">
            <p>
              <b>{{ model.projectname + '-' }}</b>
              <b>项目风险</b>
            </p>
            <p class="light">
              <span>申请人：{{ model.username + '【' + model.usercode + '】' }}</span>
              <span v-if="model.createon">创建时间：{{ formatDate(model.createon) }}</span>
            </p>
          </div>
        </div>
        <div class="toolbar">
          <el-button type="danger" icon="el-icon-close" circle @click="doCancelEdit"></el-button>
        </div>
      </div>
      <div class="mpm-project-nav" :style="{ height: mainHeight + 'px' }">
        <ul class="nav-list">
          <template v-for="item in navList">
            <li :key="item.code" :class="item.on ? 'on' : ''" @click="clickNav(item.code)" v-show="!(item.code === 'feedback' && model.state !== 9)" style="cursor: pointer;clear: both">
              <span style="float: left;width: 150px">{{ item.name }}</span>
              <span style="float: left;">
                <i v-if="item.count > 0">{{ item.count }}</i>
                <label v-if="item.flag">{{ item.flag }}</label>
              </span>
            </li>
          </template>
        </ul>
      </div>
      <div class="mpm-project-main" :style="{ height: mainHeight + 'px' }">
        <el-scrollbar class="mpm-project-main-container" id="mpmMainContainer">
          <div style="padding: 0 17px">
            <el-form class="tl-form" ref="form" :model="model" :rules="rules" label-width="150px" :disabled="disableEditSubmit">
              <div class="tl-form-line-title">
                项目信息
              </div>
              <a id="project" class="step-position">&nbsp;</a>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="申请人" prop="username">
                    <el-input v-model="model.username" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="项目编号" prop="projectcode">
                    <el-input v-model="model.projectcode" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="项目经理" prop="projectmanager">
                    <el-input v-model="model.projectmanager" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="项目级别" prop="projectlevel">
                    <el-input v-model="model.dispprojectlevel" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="tl-form-line-title">
                风险详情
              </div>
              <a id="basic" class="step-position">&nbsp;</a>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="风险性质" prop="riskproperty" :rules="rules.validateRequire">
                    <el-select v-model="model.riskproperty" :disabled="disableSave">
                      <el-option v-for="item in codeModel.riskPropertyList" :key="item.code" :label="item.name" :value="item.code"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="风险状态" prop="riskstatus">
                    <el-select v-model="model.riskstatus" :disabled="true">
                      <el-option v-for="item in codeModel.riskStatusList" :key="item.code" :label="item.name" :value="item.code"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="风险描述" prop="riskdescription" :rules="rules.lengthRequire">
                    <el-input v-model="model.riskdescription" :disabled="disableSave" type="textarea" :rows="3" placeholder="请输入对风险的详细描述" maxlength="1000" show-word-limit></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="风险可能性" prop="riskprobability" :rules="rules.validateRequire">
                    <el-select v-model="model.riskprobability" :disabled="disableSave" placeholder="请选择风险可能性">
                      <el-option v-for="item in codeModel.riskProbabilityList" :key="item.code" :label="item.name" :value="item.code"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="风险影响程度" prop="riskinfluencelevel" :rules="rules.validateRequire">
                    <el-select v-model="model.riskinfluencelevel" :disabled="disableSave" placeholder="请选择风险影响程度">
                      <el-option v-for="item in codeModel.riskInfluenceLevelList" :key="item.code" :label="item.name" :value="item.code"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="风险等级" prop="disprisklevel">
                    <el-input v-model="model.disprisklevel" placeholder="根据影响程度和可能性计算" v-bind:class="classRiskLevel" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="风险影响评估" prop="influencequantization" :rules="rules.lengthRequire">
                    <el-input v-model="model.influencequantization" placeholder="请输入对成本、进度、范围等的量化描述" :disabled="disableSave" maxlength="1000" show-word-limit type="textarea" :rows="3"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="风险应对计划" prop="riskmeasure" v-if="model.riskmeasure">
                    <el-input v-model="model.riskmeasure" type="textarea" :disabled="true" :autosize="{ minRows: 1, maxRows: 3 }" placeholder="请输入针对该风险的具体应对措施" maxlength="500" show-word-limit></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="风险责任人" prop="responsible" v-if="model.responsiblecode">
                    <el-input v-model="model.responsible" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item class="risk-date" label="计划完成日期" prop="riskmeasuredue" v-if="model.riskmeasuredue">
                    <el-date-picker v-model="model.riskmeasuredue" :disabled="true" type="date" value-format="yyyy-MM-dd"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注" prop="description">
                    <el-input v-model="model.description" type="textarea" :disabled="disableSave" maxlength="1000" show-word-limit :rows="3"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <div v-if="feedbackList.length > 0">
                <div class="tl-form-line-title">
                  风险反馈
                </div>
                <a id="feedback" class="step-position">&nbsp;</a>
                <el-timeline>
                  <el-timeline-item v-for="(item, index) in feedbackList" :key="index + 'feedback'" color="#0A6ED2">
                    <div>
                      <span>风险反馈&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span style="color: #888">{{ item.username }}于{{ formatDate(item.submitdate) }}填写</span>
                    </div>
                    <el-row style="margin-top: 5px">
                      <el-col :span="12">
                        <el-form-item label="风险状态" prop="riskstatus">
                          <el-select v-model="item.riskstatus" filterable clearable>
                            <el-option v-for="item in codeModel.riskStatusList" :key="item.code" :label="item.name" :value="item.code" />
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="风险趋势" prop="risktrend">
                          <el-select v-model="item.risktrend" filterable clearable>
                            <el-option v-for="item in codeModel.riskTrendList" :key="item.code" :label="item.name" :value="item.code" />
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="风险反馈" prop="riskfeedback">
                          <el-input v-model="item.riskfeedback" type="textarea" maxlength="1000" show-word-limit :autosize="{ minRows: 1, maxRows: 3 }"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="备注" prop="description">
                          <el-input v-model="item.description" type="textarea" maxlength="1000" show-word-limit :autosize="{ minRows: 1, maxRows: 3 }"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-timeline-item>
                </el-timeline>
              </div>

              <div class="tl-form-line-title">
                申请信息
              </div>
              <a id="apply" class="step-position">&nbsp;</a>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="申请人姓名" prop="username" :rules="rules.validateRequire">
                    <tl-ref-user v-model="model.username" :initDisplayData.sync="model.username" dataType="code" :disabled="true" :singleSelect="true"></tl-ref-user>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="申请人工号" prop="usercode">
                    <el-input v-model="model.usercode" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="所属部门" prop="deptname" :rules="rules.validateRequire">
                    <tl-ref-dept v-model="model.deptname" :initDisplayData.sync="model.deptname" :disabled="true" dataType="code" nameType="fullname" :singleSelect="true"></tl-ref-dept>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所属公司" prop="orgname">
                    <el-input v-model="model.orgname" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="提交日期" prop="submitdate">
                    <el-date-picker v-model="model.submitdate" type="date" placeholder="date()" value-format="yyyy-MM-dd" :disabled="true"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="状态" prop="state">
                    <el-select v-model="model.state" filterable clearable :disabled="true" placeholder="开立">
                      <el-option v-for="item in codeModel.stateList" :key="item.code" :label="item.name" :value="parseInt(item.code)" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer" style="float: right; margin-top: 10px">
              <el-button type="primary" @click="doSubmitEdit" :loading="saveLoading" v-if="!disableEditSubmit" :disabled="disableSave"> <svg-icon icon-class="save" />保存 </el-button>
              <el-button type="primary" @click="projectSubmit" :loading="submitLoading" v-if="!disableEditSubmit" :disabled="disableSave"> <svg-icon icon-class="send" />提交审批 </el-button>
              <tl-attachment ref="attachmentRef" sourceType="MpmProjectRisk" :sourceId="model.id" :disabled="disableAttachment" :editable="stateEdit">
                <el-button type="primary" :disabled="disableAttachment" icon="el-icon-paperclip" @click="$refs.attachmentRef.openUploadDialog()">{{ this.$refs.attachmentRef ? this.$refs.attachmentRef.btnTitle : '' }} [{{ this.$refs.attachmentRef ? (this.$refs.attachmentRef.fileList.length > 0 ? this.$refs.attachmentRef.fileList.length : this.$refs.attachmentRef.fileCount) : 0 }}] </el-button>
              </tl-attachment>
              <el-button type="primary" @click="openFeedbackDialog" v-if="showFeedback"><svg-icon icon-class="send" />风险反馈</el-button>
              <el-button type="primary" @click="$refs.history.visible = true" :disabled="disableApprovalHistory"> <svg-icon icon-class="list" />审批历史 </el-button>
              <el-button type="primary" @click="doDelApproval" :loading="delApprovalLoading" v-if="!disableEditSubmit" :disabled="disableDelApproval"> <svg-icon icon-class="undo" />取消审批 </el-button>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <risk-feedback ref="feedbackForm" :projectinfo="projectinfo"></risk-feedback>
    <tl-approval-history ref="history" sourceType="MpmProjectRisk" :sourceId="model.id" />
  </tl-sub-page>
</template>

<script>
/** mixins */
import { mixin_approval_edit_edit } from '../../../mixins/mixin_approval_edit'
/** 子组件 */
import TlRefStakeholder from '../mpmProjectStakeholder/refList'
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
import { formatDate } from '@tapui/utils/date'
import riskFeedback from '../mpmProjectRiskFeedback/edit'

/** VUE配置 */
export default {
  mixins: [mixin_approval_edit_edit],
  components: { TlRefStakeholder, riskFeedback },
  data() {
    return {
      moduleTitle: '项目风险',
      urlPrefix: '/mpm/projectRisk/',
      url: {
        // 额外的url
        riskLevelMatrixUrl: '/mpm/projectRisk/riskLevelMatrix',
        riskFeedback: '/mpm/projectRiskFeedback/list'
      },
      addRules: {
        // 输入框通用校验
        lengthRequire: [{ pattern: '.{1,}', required: 'true', message: '输入内容过短', trigger: 'change' }, { whitespace: true, required: 'true', message: '输入内容不能为空格', trigger: 'change' }]
      },
      // 风险评估矩阵
      riskLevelMatrix: '',
      disprisklevel: '',
      isAdd: false,
      // 抽屉组件
      mainHeight: 700,
      navList: [{ name: '项目信息', on: false, code: 'project' }, { name: '风险详情', on: true, code: 'basic' }, { name: '风险反馈', on: false, code: 'feedback' }, { name: '申请信息', on: false, code: 'apply' }],
      mainScrollElement: null,
      feedbackList: []
    }
  },
  // 传入projectinfo
  props: {
    projectinfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    render: {
      default: 'el-drawer',
      type: String
    }
  },
  computed: {
    // 当风险可能性和风险影响程度 任意一个更新后 拼串返回
    riskprobabilityAndriskinfluencelevel() {
      return `${this.model.riskprobability}|${this.model.riskinfluencelevel}`
    },
    classRiskLevel: function() {
      let res = ''
      switch (this.model.risklevel) {
        case 0:
          res = 'low-level'
          break
        case 1:
          res = 'middle-level'
          break
        case 2:
          res = 'high-level'
          break
      }
      return res
    },
    // 禁用审批按钮
    disableApproval() {
      return (this.stateApproval && this.model.state !== 2) || this.uiOperateState === 4
    },
    showFeedback() {
      return this.model.state === 9 && this.model.responsiblecode === this.user.code && this.model.riskstatus !== '1'
    }
  },
  watch: {
    // riskprobabilityAndriskinfluencelevel 更新后 将风险等级 risklevel，根据data()里的map 返回对应的 低中高 0 1 2
    riskprobabilityAndriskinfluencelevel(after, before) {
      if (after === 'null|null') {
        return
      }
      const [newProbability, newInfluenceLevel] = after.split('|')
      if (newProbability !== 'undefined' && newInfluenceLevel !== 'undefined') {
        this.$set(this.model, 'risklevel', this.riskLevelMatrix[newProbability][newInfluenceLevel])
        // 这个之后改成codemodellist获取
        let temp = this.codeModel.riskLevelList.filter((element) => {
          return parseInt(element.code) === this.model.risklevel
        })
        this.disprisklevel = temp[0].name
        this.$set(this.model, 'disprisklevel', temp[0].name)
      }
    }
  },
  methods: {
    doSubmitEdit() {
      if (!this.beforeSubmit()) {
        return
      }
      if (this.isAdd) {
        this.doAdd()
      } else {
        this.doEdit()
      }
    },
    afterSubmit() {
      this.$refs.form.clearValidate()
    },
    projectSubmit() {
      let that = this
      that.submitLoading = true
      that.$refs.form.validate(async (valid, res) => {
        if (valid) {
          let saveresult = await that.addBase()
          if (saveresult) {
            this.saveLoading = true
            const parameter = { id: that.model.id }
            putAction(that.url.submit, that.model)
              .then((res) => {
                if (res.success) {
                  that.queryData(that.model.id).then((_) => {
                    that.loaded()
                    that.saveLoading = false
                    that.submitLoading = false
                  })
                  that.$tap.alert('提交审批成功', 'success')
                } else {
                  that.$tap.alert(res.message, 'warning')
                  that.saveLoading = false
                  that.submitLoading = false
                }
              })
              .catch((err) => {
                that.saveLoading = false
                that.submitLoading = false
              })
          }
        } else {
          that.submitLoading = false
          that.$tap.alert('按要求填写表单数据项，包括必填项，数据格式等')
        }
      })
    },
    assignDefaultValue() {
      if (this.isAdd) {
        if (this.codeModel.flowidList && this.codeModel.flowidList.length > 0) {
          this.$set(this.model, 'flowid', parseInt(this.codeModel.flowidList[0].id))
        }

        this.$set(this.model, 'orgcode', this.org.code)
        this.$set(this.model, 'disporgcode', this.org.name)
        this.$set(this.model, 'orgname', this.org.name)

        this.$set(this.model, 'deptcode', this.dept.code)
        this.$set(this.model, 'deptname', this.dept.fullname)
        this.$set(this.model, 'usercode', this.user.code)
        this.$set(this.model, 'username', this.user.name)
        this.$set(this.model, 'docdate', new Date())
        this.$set(this.model, 'submitdate', new Date())
        this.$set(this.model, 'state', 0)
        this.$set(this.model, 'riskdate', new Date())
        this.$set(this.model, 'riskstatus', '0')
      }
    },
    /** 新增状态下把项目信息自动填写到单据中 **/
    setProjectInfo() {
      this.$set(this.model, 'projectid', this.projectinfo.id)
      this.$set(this.model, 'projectlevel', this.projectinfo.projectlevel)
      this.$set(this.model, 'dispprojectlevel', this.projectinfo.dispprojectlevel)
      this.$set(this.model, 'projectname', this.projectinfo.projectname)
      this.$set(this.model, 'projectcode', this.projectinfo.projectcode)
      this.$set(this.model, 'projectmanager', this.projectinfo.projectmanager)
      this.$set(this.model, 'projectmanagercode', this.projectinfo.projectmanagercode)
    },
    // addNavi() {
    //         this.navList.splice(2, 0, { name: "风险反馈", on: false, code: "feedback" })
    // },
    /** 抽屉组件必有 **/
    resizeHandler() {
      this.mainHeight = document.body.getBoundingClientRect().height - 100 - (this.isApproval ? 110 : 0)
    },
    /** 抽屉组件必有 **/
    doCancelEdit() {
      this.visible = false
      this.$emit('close')
      this.$emit('refresh')
    },
    /** 抽屉组件必有 **/
    formatDate(date) {
      return formatDate(new Date(date ? date.toString().replace(/\-/g, "/") : date), "yyyy-MM-dd")
    },
    /** 点击左侧导航，抽屉组件必有 **/
    clickNav(code) {
      this.navList.forEach((m) => {
        if (m.code === code) {
          m.on = true
        } else {
          m.on = false
        }
      })
      let element = document.getElementById(code)
      if (element === null) return
      let goY = element.getBoundingClientRect().y - 75
      this.mainScrollElement.scrollTop += goY
    },
    /** 页面滚动时，动态改变左侧导航选中的元素，抽屉组件必有 **/
    onMainScroll() {
      this.mainScrollElement.addEventListener('scroll', () => {
        let currentTop = this.mainScrollElement.scrollTop
        let code = ''
        for (let element of document.getElementsByClassName('step-position')) {
          if (element.getBoundingClientRect().y >= 0) {
            code = element.id
            if (this.mainScrollElement.scrollHeight - this.mainScrollElement.scrollTop - document.getElementById('mpmMainContainer').scrollHeight > 10) {
              break
            }
          }
        }
        this.navList.forEach((m) => {
          if (m.code === code) {
            m.on = true
          } else {
            m.on = false
          }
        })
      })
    } /** 抽屉组件必重写，主要为了执行resizeHandler方法、给mainScrollElement赋值，并添加监听事件，不要直接复制该方法 **/,
    open() {
      this.model = {}
      this.resizeHandler()
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
        if (this.isAdd === true) {
          this.title = '新增' + this.moduleTitle
          // 需要添加重复判断
          if (this.$store.getters.param.isAvoidRepeat === true) {
            this.queryBillUid()
          }
          if (this.isQueryInitData === true) {
            // 后台进行数据初始化
            this.queryInitData().then((_) => {
              this.assignDefaultValue()
              this.loaded()
            })
          } else {
            // 前台进行数据初始化
            this.$set(this.model, 'enabled', 1)
            this.$set(this.model, 'sortcode', 0)
            this.assignDefaultValue()
            this.loaded()
          }
          // 判断是否可以将项目信息自动填写在单据中
          if (this.projectinfo.id) {
            this.setProjectInfo(this.projectinfo)
          }
        } else if (this.disableEditSubmit === false) {
          this.title = '编辑' + this.moduleTitle
          this.queryData(this.id).then((_) => {
            this.$refs.form.clearValidate()
            this.loaded()
          })
        } else {
          this.title = '查看' + this.moduleTitle
          this.queryData(this.id).then((_) => {
            this.$refs.form.clearValidate()
            this.loaded()
          })
        }
        this.mainScrollElement = document.getElementById('mpmMainContainer').getElementsByClassName('el-scrollbar__wrap')[0]
        this.onMainScroll()
      })
    },
    doAddApproval() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.isAdd) {
            this.doSaveAndApproval()
          } else {
            this.doSubmitApproval()
          }
        } else {
          return false
        }
      })
    },
    /** 执行新增保存和审批 */
    doSaveAndApproval() {
      this.saveLoading = true
      // 增加唯一单号
      this.$set(this.model, 'billuid', this.uid)
      postAction(this.url.add, this.model)
        .then((res) => {
          if (res.success) {
            this.$tap.message('添加成功', 'success')
            if (!this.url.load) {
              this.saveloading = false
              this.$tap.alert('请设置load地址!', 'warning')
              return
            }
            getAction(this.url.load, { id: res.result.id }).then((res) => {
              if (res.success) {
                this.model = res.result
                this.isAdd = false
                this.afterSubmit()
                this.doSubmitApproval()
              } else {
                this.$tap.alert(res.message, 'warning')
              }
            })
          } else {
            this.saveLoading = false
            this.$tap.alert(res.message, 'warning')
          }
        })
        .catch((err) => {
          this.saveLoading = false
        })
    },
    doSubmitApproval() {
      if (!this.url.submit) {
        this.$tap.alert('请设置审批地址!', 'warning')
        this.saveLoading = false
        return
      }
      this.saveLoading = true
      this.submitLoading = true
      this.$tap
        .confirm('确定提交审批吗？提交后，单据内容不可修改！')
        .then((_) => {
          if (!this.beforeApproval()) {
            this.submitLoading = false
            this.saveLoading = false
            return
          }
          putAction(this.url.submit, this.model).then((res) => {
            if (res.success) {
              this.$tap.message(res.message, 'success')
              this.queryData(this.model.id)
              this.afterApproval()
            } else {
              this.$tap.alert(res.message, 'warning')
            }
            this.saveLoading = false
            this.submitLoading = false
          })
        })
        .catch((_) => {
          this.saveLoading = false
          this.submitLoading = false
        })
    },
    loaded() {
      // 页面加载完毕执行
      if (!this.isAdd && this.model.docno) {
        this.title = this.title + `（单据编号：${this.model.docno}）`
      }
      // 加载风险反馈信息
      if (this.model.id) {
        const param = {
          qry_riskid: this.model.id,
          qry_state: '9',
          sidx: 'createon',
          sord: 'desc',
          currentPage: 1,
          pageSize: 2000
        }
        getAction(this.url.riskFeedback, param).then((res) => {
          if (res.success) {
            this.feedbackList = res.result.dataList
          } else {
            this.$tap.alert(res.message, 'warning')
          }
        })
      }
    },
    // 提交审批时初始化提交日期
    beforeDelApproval() {
      this.$set(this.model, 'submitdate', new Date())
      return true
    },

    // 获取风险等级矩阵
    getRiskLevelMatrix() {
      getAction(this.url.riskLevelMatrixUrl, '').then((res) => {
        if (res.success) {
          let matrix = JSON.parse(res.result.riskLevelMatrix)
          this.$set(this, 'riskLevelMatrix', matrix)
        }
      })
    },
    // 打开任务反馈页面
    openFeedbackDialog() {
      getAction(this.url.riskFeedback, { qry_riskid: this.model.id, qry_state: '0,1,2' }).then((res) => {
        if (res.success) {
          if (res.result.dataList.length > 0 && res.result.dataList[0].state === 1) {
            this.openViewFeedbackDialog('feedbackForm', res.result.dataList[0].id)
          } else if (res.result.dataList.length > 0 && (res.result.dataList[0].state === 0 || res.result.dataList[0].state === 2)) {
            this.openEditFeedbackDialog('feedbackForm', res.result.dataList[0].id)
          } else {
            this.openAddFeedbackDialog('feedbackForm')
          }
        } else {
          this.$tap.alert(res.message, 'warning')
        }
      })
    },
    // 打开任务反馈新增页面
    openAddFeedbackDialog(editForm) {
      this.$refs[editForm].isAdd = true
      this.$refs[editForm].visible = true
      this.$refs[editForm].disableEditSubmit = false
      this.$refs[editForm].riskid = this.model.id
      this.$refs[editForm].riskdescription = this.model.riskdescription
    },
    // 打开任务反馈编辑页面
    openEditFeedbackDialog(editForm, id) {
      this.$refs[editForm].id = id
      this.$refs[editForm].isAdd = false
      this.$refs[editForm].visible = true
      this.$refs[editForm].disableEditSubmit = false
    },
    // 打开任务反馈查看页面
    openViewFeedbackDialog(editForm, id) {
      this.$refs[editForm].id = id
      this.$refs[editForm].isAdd = false
      this.$refs[editForm].visible = true
      this.$refs[editForm].disableEditSubmit = true
    },
    close() {
      this.feedbackList = []
    }
  },
  created() {
    this.getRiskLevelMatrix()

    // 抽屉组件必有
    window.addEventListener('resize', this.resizeHandler)
  },
  destroyed() {
    // 抽屉组件必有
    window.removeEventListener('resize', this.resizeHandler)
  }
}
</script>
<style lang="scss" scoped>
.risk-date /deep/ .el-form-item__label {
  padding: 0 6px 0 0;
}

.tl-drawer /deep/ .el-drawer__body {
  overflow: unset;
}

$riskLevels: high, middle, low;
$riskColors: #ff6363, #ffe119, #bfef45;
//for 循环 根据风险低中高 匹配颜色和字体样式
@for $i from 1 through 3 {
  .#{nth($riskLevels,$i)}-level /deep/ .el-input__inner {
    background-color: nth($riskColors, $i);
    //背景红色 则加粗
    @if $i == 1 {
      font-weight: bold;
    }
    color: #303133 !important;
  }
}
</style>
